<style>
    select {
        width: auto;
    }
</style>
<fieldset>
    <legend>创建商品类型</legend>
    <input type="hidden" name="category.id" value="${(category.id)!}"/>

    <div>
        <label>类型名称</label>
        <input type="text" name="category.name" value="${(category.name)!}"/><span class="error">${categoryName!}</span>
    </div>
    <div>
        <label>上级类型</label>
        <select name="category.parent">
            <option value="${(category.parent)!}">请选择...</option>
            <#if parents??>
                <#list parents as p>
                    <option value="${p.id}">${p.name}</option>
                </#list>
            </#if>
        </select>
    </div>
    <div>
        <label>描述</label>
        <textarea name="category.memo" class="span8" rows="5">${(category.memo)!}</textarea>
    </div>
    <div>
        <label>&nbsp;</label>
        <input class="btn btn-primary" value="提交" type="submit">
    </div>
</fieldset>

<script>

    $(function () {
        //设置类型的级连选择
        var setSelectFileds = function ($select) {
            $select.unbind("change").change(function () {
                var _self = $(this);
                _self.attr("name", "goods.categoryId");
                while (_self.next("select").length) {
                    var next = _self.next("select");
                    next.remove();
                }
                if ($(this).val() && $(this).val() != "${(category.parent)!}") {
                    $.get("/admin/category/child/" + $(this).val(), function (data) {
                        if (data.categorys.length > 0) {
                            _self.removeAttr("name");
                            var select = $("<select />");
                            select.attr("name", "goods.categoryId");
                            var options = new Array();
                            var topOne = $("<option />");
                            topOne.val("").html("请选择...");
                            options.push(topOne);
                            $.each(data.categorys, function (i, item) {
                                var option = $("<option />");
                                option.val(item.id).html(item.name);
                                options.push(option);
                            });
                            select.html(options);
                            _self.after(select);
                            setSelectFileds(select);
                        }
                    }, "json");
                }


            });
        }
        setSelectFileds($("select[name='category.parent']"));
    });


</script>